<template>
    <div class="main-my-orders">
        <div class="header">
            <div class="tabs">
                <van-tabs v-model:active="active" @click-tab="onClickTab">
                    <van-tab :title="item.title" v-for="(item,index) in tabs">
                        <template #title><span class="title">{{item.title}}</span></template>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <div class="content">
            <div class="no-data" v-if="tabs[active].items.length === 0">
                <van-image width="100%" :src="img" />
                <section>
                    <center class="text">There is n ongoing order right now. </center>
                    <center class="text">You can order from home</center>
                </section>
            </div>
            <template v-else>
                <template v-if="tabs[active].key === 'ongoing'">
                    <div class="date">
                        <span class="desc"><van-icon name="calendar-o" size="20" :style="{fontWeight: 'bold'}" /> March 5, 2019</span>
                        <span class="time">6:30 pm</span>
                    </div>
                    <van-steps direction="vertical" :active="1" active-color="#5EC401" inactive-icon="checked" >
                        <van-step>
                            <van-row class="desc" align="center" style="m" gutter="20">
                                <van-col>
                                    <img :src="cover9991">
                                </van-col>
                                <van-col class="text">
                                    We are packin your items...
                                </van-col>
                            </van-row>
                        </van-step>
                        <van-step>
                            <van-row class="desc" align="center" style="m" gutter="20">
                                <van-col>
                                    <img :src="cover9991">
                                </van-col>
                                <van-col class="text">
                                    We are packin your items...
                                </van-col>
                            </van-row>
                        </van-step>
                        <van-step>
                            <van-row class="desc" align="center" style="m" gutter="20">
                                <van-col>
                                    <img :src="cover9991">
                                </van-col>
                                <van-col class="text">
                                    We are packin your items...
                                </van-col>
                            </van-row>
                        </van-step>
                    </van-steps>
                </template>
                <template v-if="tabs[active].key === 'history'">
                    <van-swipe-cell v-for="item in tabs[active].items">
                        <van-card 
                            centered
                            class="cart-card" 
                            >
                                <template #title>
                                    <span class="title">{{item.order_num}}</span>
                                </template>
                                <template #thumb>
                                    <img class="img" :src="item.order_icon" />
                                </template>
                                <template #price>
                                    <section><font :color="item.state == 200 ? '#5EC401' : '#F2110D'" style="font-size: 14px">{{item.state_text}}</font></section>
                                    <section><font color="#804F1E" style="font-size: 14px">{{item.order_date}}</font></section>
                                </template>
                                <template #num>
                                    <span class="price">$700</span>
                                </template>
                        </van-card>
                        <template #right>
                            <van-button square type="danger" class="delete-button" >
                                <van-icon name="delete-o" size="30" />
                            </van-button>
                        </template>
                    </van-swipe-cell>
                </template>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref } from "vue";
import img from '../../assets/31.png';
import cover from '../../assets/Group 93.png'
import cover9991 from '../../assets/Group-9991.png'

getCurrentInstance()

const tabs = ref([
    {
        title: 'Ongoing',
        key: 'ongoing',
        items: [{}]
    },
    {
        title: 'History',
        key: 'history',
        items: [
            {
                order_icon: cover,
                state: 200,
                order_num: 'Order #345',
                order_date: 'October 26, 2014',
                order_price: '700',
                state_text: 'Delivered'
            },
            {
                order_icon: cover,
                state: 0,
                order_num: 'Order #345',
                order_date: 'October 26, 2014',
                order_price: '700',
                state_text: 'Cancelled'
            }
        ]
    }
])

const active = ref(0)

const onClickTab = () => {

}

</script>

<style lang="less" scoped>
.main-my-orders {
    padding-top: 10px;
    .header {
        border-bottom: 0.5px solid rgba(109, 56, 5, 0.09);
        .tabs {
            width: 80%;
            margin: auto;
            position: relative;
            .title {
                font-size: 20px;
                line-height: 24px;
                text-align: center;
                letter-spacing: 0.1px;
            }
        }
    }
    .content {
        .no-data {
            padding: 70px 30px 0px 30px;
            section {
                margin-top: 20px;
                .text {
                    padding: 0px 10px;
                    font-size: 16px;
                    line-height: 19px;
                    text-align: center;
                    letter-spacing: 0.6px;
                    color: #804F1E;
                }
            }

        }
        .cart-card {
            margin: 0;
            background-color: #fff;
            border-bottom: 1px solid #f1f1f1;
            .title {
                font-weight: bold;
                font-size: 18px;
                line-height: 22px;
                color: #6D3805;
            }
            :deep(.van-card__content) {
                position: relative;
                margin-left: 16px;
                .van-card__bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    margin-top: 5px;
                    .van-stepper {
                        background: #F4F4F4;
                        box-shadow: inset 0px 0px 4px rgba(109, 56, 5, 0.2);
                        border-radius: 30px;
                        padding: 3px;
                        button {
                            background: #fff;
                            color: #6D3805;
                            box-shadow: 0px 1px 2px rgba(109, 56, 5, 0.2);
                        }
                    }
                    .price {
                        margin-top: 5px;
                        font-size: 18px;
                        line-height: 22px;
                        text-align: right;
                        color: #6D3805;
                        em {
                            margin-left: 5px;
                            font-size: 14px;
                            font-style: normal;
                        }
                    }
                    .cart {
                        display: flex;
                        align-items: center;
                        color: #FF5E00;
                        font-size: 18px;
                        .icon {
                            margin-right: 5px;
                        }
                    }
                }
                .van-card__num {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    .price {
                        font-weight: bold;
                        font-size: 20px;
                        line-height: 24px;
                        text-align: right;
                        color: #F37A20;
                    }
                }
            }
            :deep(.van-card__thumb) {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-right: 0px;
                width: 44px;
                .img {
                    width: 100%;
                }
            }
            
        }
        .date {
            margin: 45px 16px;
            display: flex;
            justify-content: space-between;
            .desc {
                font-weight: bold;
                font-size: 18px;
                line-height: 32px;
                letter-spacing: 1.28px;
                color: #6D3805;
            }
            .time {
                font-size: 14px;
                line-height: 32px;
                text-align: right;
                letter-spacing: 0.9775px;
                color: #F37A20;
            }
        }
        :deep(.van-steps) {
            overflow: inherit;
            .van-step {
                padding: 40px 10px 40px 0;
                &:last-child {
                    .van-step__line {
                        width: 0px;
                        border-left: 0px
                    }
                }
                .van-step__line {
                    width: 0px;
                    border-left: 1px #C6C6C6 dashed;
                }
                .van-icon {
                    font-size: 16px;
                }
                .van-step__title {
                    margin-left: 15px;
                    .desc {
                        margin-top: -40px;
                        .text {
                            font-size: 16px;
                            line-height: 32px;
                            letter-spacing: 0.9775px;
                            color: #6D3805;
                        }
                    }
                }
            }
            .van-step--vertical {
                &::after {
                    border: 0px;
                }
            }
        }
    }
}


</style>
